<template>
	<view class="wrap">
		<form @submit="submit">
			<view class="top">
				<view class="item">
					<view class="left">会员昵称</view>
					<input type="text" placeholder-class="line" placeholder="请填写会员昵称" name="nickname"
						v-model="nickname" />
				</view>
				<view class="item">
					<view class="left">会员头像</view>
					<u-upload ref="uUpload" name="avatarurl" :fileList="oldAvatarUrl" max-count="1" :action="action"
						upload-text="上传头像" :auto-upload="false" @on-success="uploadsuccess" @on-error="uploaderror"
						@on-choose-complete="chooseimg" :form-data="formData" :header="header"></u-upload>
				</view>
				<view class="item">
					<view class="left">会员性别</view>
					<view class="right">
						<u-radio-group v-model="sex" @change="radioGroupChange" active-color="orange">
							<u-radio v-for="(item, index) in sexlist" :key="index" :name="item.value">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="item" @tap="showBirthdayPicker">
					<view class="left">会员生日</view>
					<input disabled type="text" placeholder-class="line" placeholder="2021-01-24" name="birthday"
						v-model="birthday" />
				</view>
				<view class="item" @click="regionVisible = true">
					<view class="left">所在地址</view>
					<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" name="region"
						v-model="region" />
				</view>
			</view>
			<regionPicker :visible.sync="regionVisible" mode="region" default-type="value" :hide-area="false"
				@confirm="onConfirm($event, 'region')" ref="region"></regionPicker>
			<u-picker mode="time" ref="uPicker" v-model="birthdayShow" @confirm="birthdayConfirm" />
			<button form-type="submit" type="warn">保存并使用</button>
			<button form-type="reset">重置</button>
		</form>
	</view>
</template>

<script>
	// 引入地区模块
	import regionPicker from "@/components/region/w-picker.vue";
	import checkToken from '../../utils/checkToken'
	export default {
		components: {
			regionPicker
		},
		data() {
			return {
				id: '', //初始化修改数据id
				// 头像提交服务端地址
				action: this.$pregImg + `/api/infoedit`,
				// 需要展示的图片列表比如展示需要编辑的用户头像
				oldAvatarUrl: [],
				// 表单数据(不含头像信息)
				formData: {},
				// 初始化header头
				header: {},
				oldImg: '', //初始化旧图片
				regionVisible: false, //初始化地区选择器开关
				nickname: '', //初始化收件人姓名
				region: '', //初始化地区默认值
				birthday: '',
				birthdayShow: false,
				sexlist: [{
						value: 1,
						name: '男'
					},
					{
						value: 2,
						name: '女'
					},
				],
				sex: 1 //初始化会员性别
			}
		},

		onLoad() {
			let res = checkToken(this);
			// 检测登录失效或者未登录
			if (!res) {
				uni.showToast({
					title: '请先登录'
				})
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}, 1000)
			}
			this.userInfo = uni.getStorageSync('userInfo');
			this.requestUserInfo(0);
		},

		methods: {
			// 修改会员信息
			submit(e) {
				// 处理表单修改数据 包含有图片长传
				this.formData = {
					...e.detail.value,
					id: this.id,
					sex: this.sex,
					avatarurl: this.oldImg
				}
				// 处理请求头信息
				this.header = {
					authorization: this.userInfo.token
				}

				if (this.$refs.uUpload.lists[0].file) {
					console.log(this.$refs.uUpload);
					//主要走上传文件
					setTimeout(() => {
						this.$refs.uUpload.upload();
					}, 1000)
				} else {
					// 没有文件上传
					this.$http({
						url: '/api/infoedit',
						method: 'post',
						header: this.header,
						data: {
							...e.detail.value,
							id: this.id,
							sex: this.sex
						}
					}).then(res => {
						if (res.data.code === 200) {
							uni.showToast({
								title: res.data.msg
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/user/user'
								})
							}, 1000)
							this.requestUserInfo(1);
						}
					})
				}
			},
			//获取会员信息
			/**
			 * @params isUpdate   1:更新   0:不更新
			 * */
			requestUserInfo(isUpdate) {
				this.$http({
					url: '/api/getuserinfo',
					header: {
						authorization: this.userInfo.token
					},
					data: {
						uid: this.userInfo.uid
					}
				}).then(res => {
					if (res.data.code === 200) {
						let user = res.data.list[0];
						if (isUpdate === 1) {
							// 更新缓存
							user.token = this.userInfo.token;
							// 更新缓存
							uni.setStorage({
								key: 'userInfo',
								data: user
							})
							// 跳转页面
							uni.switchTab({
								url: '/pages/user/user'
							})
						} else {
							// 展示数据
							this.nickname = user.nickname;
							this.birthday = user.birthday;
							this.id = user.id;
							this.region = user.region;
							this.sex = user.sex;
							this.oldImg = user.avatarurl;
							this.oldAvatarUrl = [{
								url: this.$pregImg + user.avatarurl
							}]
						}

					}
				})
			},
			// 选择会员地区
			onConfirm(res) {
				console.log(res);
				this.region = res.result;
			},
			// 监听本地选择图片
			chooseimg(lists, name) {},
			// 性别标签切换
			radioGroupChange(e) {},

			// 地址默认设置开关
			setDefault(e) {},

			// 开始生日选择器
			showBirthdayPicker() {
				this.birthdayShow = true;
			},
			// 监听时期选择器
			birthdayConfirm(e) {
				this.birthday = `${e.year}-${e.month}-${e.day}`
			},

			// 图片上传成功触发
			uploadsuccess(data, index, lists, name) {
				if (data.code === 200) {
					uni.showToast({
						title: '编辑成功'
					})
				}
				this.requestUserInfo(1)

			},
			// 图片上传失败触发
			uploaderror(res, index, lists, name) {},
		}
	}
</script>

<style lang="scss" scoped>
	// 引入样式
	@import '@/static/css/userinfo.scss';
</style>